<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #wrapper{
        width: 100%;
        height:  100%;
        margin: 50px auto;
        line-height: 200px;
        font-size: 20px;
        color: white;
        text-align: center;
        overflow: hidden
    }
    .header,
    .footer{
        background: grey;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .container{
        padding: 0 50px;
        overflow: hidden;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    }
    .left{
        float: left;
        width: 50px;
        margin-left: -50px;
        background: red;
    }
    .center{
        float: left;
        width:100%;
        height: 100px;
        background: black;
    }
    .right{
        float: left;
        margin-left: -100%;
        right: -100%;
        width:50px;
        background: purple;
    }
    .footer{
        clear:both;
    }
</style>
<body>
<div id = 'wrapper'>
    <div class = "header">header</div>
    <div class = "container">
        <div class = "left">left</div>
        <div class = "center">center</div>
        <div class = "right">right</div>
    </div>
    <div class = "footer">footer</div>
</div>
</body>
</html>